{% extends 'layout.html' %}
{% load static %}
{% load permission %}
{% block content %}
    <div class="panel panel-default">
        <div class="panel-heading"><i class="fa fa-line-chart"></i> 威胁感知与分析系统(天眼)告警趋势统计图</div>
        <div class="panel-body">
            <div id="chart" style="width:100%;min-height:300px"></div>
        </div>
    </div>
    <table class="table table-bordered table-hover table-striped">
        <thead class="root">
        <tr>
            <th>序号</th>
            {% for item in header_list %}
                <th style="text-align: center;">{{ item }}</th>
            {% endfor %}
        </tr>
        </thead>
        <tbody>
        {% for row in body_list %}
            <tr>
                <td class="" style="vertical-align: middle;text-align: center;">{{ forloop.counter }}</td>
                {% for ele in row %}
                    <td style="vertical-align: middle;text-align: center;">{{ ele }}</td>
                {% endfor %}
            </tr>
        {% endfor %}
        </tbody>
    </table>

    <ul class="pagination">
        {{ pager.html }}
    </ul>


{% endblock %}

{% block js %}
    <script src="{% static 'plugins/highcharts/highcharts.js' %}"></script>
    <script src="{% static 'js/line_chart.js' %}"></script>
    <script>
        var CHART_TITLE = "攻击数量统计";
        var API_URL = "{% url 'skyeye_account_chart' %}";
        $(function () {
            initChart();
        });
    </script>
{% endblock %}